<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--  考勤记录-->
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 导航栏css 需要通过服务器请求-->
    <link rel="stylesheet" href="/css/nav.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .sea {
            margin: 20px 25px 0px 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body::-webkit-scrollbar { /* 隐藏滚动条 */
            display: none; /* Chrome, Safari, and Opera */
        }
        /*分页*/
        .block {
            padding: 10px;
            background: #fff;
            border: none;
            text-align: right;
            width: 100%;
            height: 30px;
            z-index: 2;
            position: fixed;
            bottom: 0;
            right: 0;
            box-shadow: 0px 0px 10px 1px #a0a0a0;
        }
    </style>
</head>
<body>
<div id="app">
    <div th:replace="nav :: nav"></div>
    <!-- 水印层 -->
    <div class="watermark">{{userNowName}} {{user}}</div>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="margin-top: 70px;"></div>
        <div class="sea">
            <!--     面包屑导航 -->
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a th:href="@{/}">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
                    <el-breadcrumb-item>考勤记录</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 姓名搜索 日期范围搜索-->
            <div class="select" style="display: flex;">
                <el-input v-if="!userRole2" placeholder="请输入查询员工的姓名" v-model="selectName" class="input-with-select" size="mini" clearable></el-input>
                <div style=" margin: 0 20px">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="value1" type="daterange" size="mini" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </div>
                <el-button slot="append"  size="mini" icon="el-icon-search" @click="searchList()">查询</el-button>
            </div>
            <!-- 批量补签 -->
            <div>
                <el-row>
                    <el-button v-if="!userRole2" size="small" type="primary" icon="el-icon-circle-check" @click="ALLDialog=true">批量处理</el-button>
                    <el-button size="small" type="warning" icon="el-icon-refresh" @click="reload()">重置</el-button>
                </el-row>
            </div>
        </div>
        <!-- stripe属性可以创建带斑马纹的表格； border表格边框 -->
        <el-table  size="mini" :data="originalData" stripe style="width: 100%;  margin-bottom: 50px;" @selection-change="handleSelectionChange">
            <!--  序号-->
            <el-table-column type="index" width="50" align="center"></el-table-column>
            <!-- #选中 -->
            <el-table-column  type="selection" width="45" align="center"></el-table-column>
            <!-- 员工姓名 -->
            <el-table-column label="员工姓名" width="90">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.z_name + '(' + scope.row.username + ')'" placement="top"  :hide-after=2000>
                        <span>{{scope.row.z_name}}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- 所属部门 -->
            <el-table-column prop="department" label="所属部门" width="120"
                             :filters="[{ text: '总裁办', value: '总裁办' }, { text: '战略规划部', value: '战略规划部' }, { text: '人力资源中心', value: '人力资源中心' }, { text: '法务部', value: '法务部' },{ text: 'IT部', value: 'IT部' }, { text: '集团供应链', value: '集团供应链' },  { text: '国际营销系统', value: '国际营销系统' }, { text: '国内营销系统', value: '国内营销系统' },{ text: 'POCT系统', value: 'POCT系统' }]"
                             :filter-method="filterDepartment"
                             filter-placement="bottom-end">
            </el-table-column>
            <!-- 考勤日期 -->
            <el-table-column prop="attendanceDate" label="考勤日期" width="180" sortable ></el-table-column>
            <!-- 首打卡 -->
            <el-table-column prop="firstCheckIn" label="首打卡" width="190">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.firstCheckIn }}</span>
                </template>
            </el-table-column>
            <!-- 末打卡 -->
            <el-table-column prop="lastCheckIn" label="末打卡" width="190">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.lastCheckIn }}</span>
                </template>
            </el-table-column>
            <!-- 缺勤时长 -->
            <el-table-column prop="noWorkTime" label="缺勤时长" width="100"></el-table-column>
            <!-- 考勤状态 -->
            <el-table-column width="95" prop="state" label="考勤状态"
                             :filters="[{ text: '正常', value: '正常' }, { text: '异常', value: '异常' }]"
                             :filter-method="filterState"
                             filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.state === '正常' ? '_blank' : 'danger' " disable-transitions>
                        {{ scope.row.state }}
                    </el-tag>
                </template>
            </el-table-column>
            <!-- 出勤状态 -->
            <el-table-column prop="chu_state" label="出勤状态" width="95"></el-table-column>
            <!-- 补签状态 -->
            <el-table-column  label="补签状态" width="95">
                <template slot-scope="scope">
                    <span :style="{ color: scope.row.bu_state !== '--' ? 'red' : 'inherit' }">{{ scope.row.bu_state }}</span>
                </template>
            </el-table-column>
            <!-- 备注 -->
            <el-table-column label="备注" width="130">
                <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.notes !== '--'" class="item" effect="dark" :content="scope.row.notes" placement="top"  :hide-after=2000>
                        <span >{{scope.row.notes.substring(0, 7)}}</span>
                    </el-tooltip>
                    <span v-else>{{scope.row.notes.substring(0, 7)}}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-link type="primary" style="font-size: 10px;" :disabled="(scope.row.notes.substring(0, 2) !=='补签' && scope.row.notes.substring(0, 2) !=='--') || scope.row.chu_state === scope.row.notes" @click="handleEdit(scope.$index, scope.row);title='补签' ">补签</el-link>
                    &nbsp;&nbsp;
                    <el-link type="primary" style="font-size: 10px;" :disabled="(scope.row.notes.substring(0, 2) !=='请假' && scope.row.notes.substring(0, 2) !=='--') || scope.row.chu_state === scope.row.notes" @click="handleEdit(scope.$index, scope.row);title='请假'">请假</el-link>
                    &nbsp;&nbsp;
                    <el-link type="primary" style="font-size: 10px;" :disabled="(scope.row.notes.substring(0, 2) !=='出差' && scope.row.notes.substring(0, 2) !=='--') || scope.row.chu_state === scope.row.notes" @click="handleEdit(scope.$index, scope.row);title='出差'">出差</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[15,30,50,100,200]" :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
        <!--补签 ， 请假 ，出差 对话框-->
        <el-dialog :title="title" :visible.sync="repairDialog"  width="50%" :close-on-click-modal="false"  >
            <el-form :model="form"   :inline="true" :rules="rules" ref="repairFrom" label-width="100px">
                <!--       描述列表         -->
                <el-descriptions class="margin-top"  :column="2" size="medium" border>
                    <el-descriptions-item> <template slot="label"><i class="el-icon-user"></i> 员工</template>{{form.z_name}}  {{form.username}}</el-descriptions-item>
                    <el-descriptions-item> <template slot="label"><i class="el-icon-office-building"></i> 所属部门</template>{{form.department}}</el-descriptions-item>
                    <el-descriptions-item> <template slot="label"><i class="el-icon-time"></i> 时间点</template>{{repairTime}} 9:00:00 ~ {{repairTime}} 18:15:00</el-descriptions-item>
                </el-descriptions>
                <!-- 相当于改备注 -->
                <el-form-item v-if="userRole2" label="直属上级："   style="margin: 0;"  >
                        <el-link type="primary" icon="el-icon-s-promotion" :underline="false" @click="innerVisible = true">{{addLeader}}</el-link>
                </el-form-item>
                <!-- 内层对话框 -->
                <el-dialog :close-on-click-modal="false" width="30%" title="添加流程执行人" :visible.sync="innerVisible" append-to-body>
                    <el-form-item   style="margin: 0;"  >
                            <el-input  placeholder="请输入姓名" v-model="leaderName" class="input-with-select" size="mini" clearable>
                                <el-button slot="append" size="mini" icon="el-icon-search" @click="searchLeaderName()"></el-button>
                            </el-input>
                    </el-form-item>
                    <!-- 名字查询结果 -->
                    <div style=" display: flex; flex-wrap: wrap; justify-content: space-between;  line-height: 30px; /* 设置行间距 */ ">
                        <div  v-for="(item, index) in leaderDate" :key="index" style=" width: calc(33.33% - 20px); /* 减去间距 */  margin-bottom: 10px; /* 间距 */ ">
                          <div style="display: flex">
                              <!-- 头像 随机背景颜色 -->
                              <div class="head-img" style="color: white; text-align: center; line-height: 25px;" :style="{ backgroundColor: `#${Math.floor(Math.random()*16777215).toString(16)}` }" >
                                 <span>{{item.substring(0,1)}}</span>
                              </div>
                              <el-link type="primary" @click="innerVisible=false; addLeader = item ; leaderName ='' ; getUserName() ">{{item}}</el-link>
                          </div>
                        </div>
                    </div>
                </el-dialog>
                <!--       事由         -->
                <el-form-item :label="title +'事由：'" prop="notes"  style="margin:-5px 0 0 0 ;">
                    <el-input type="textarea" autosize  placeholder="请输入内容" v-model="form.notes" autocomplete="off" :style="{ width: '610px' }" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
                <el-button  @click="repairDialog = false;">取 消</el-button>
                <el-button  v-if="ifFormButton && !userRole2" type="primary" @click="repair()">确 定</el-button>
                <el-button v-if="ifFormButton && userRole2" type="primary" @click="lications()">提 交</el-button>
            </div>
        </el-dialog>
        <!--批量处理 对话框-->
        <el-dialog  title="批量处理" :visible.sync="ALLDialog"  width="50%" :close-on-click-modal="false"  >
            <el-form :model="ALLForm"   :inline="true" :rules="rules" ref="ALLrepairFrom" label-width="100px">
                <el-table :data="multipleSelection" size="mini" :style="{ 'max-height': '288px', overflow: 'auto' }">
                    <el-table-column  label="姓名" width="240"><template slot-scope="scope"><span>{{ scope.row.z_name}}({{scope.row.username}})</span></template></el-table-column>
                    <el-table-column property="department" label="所属部门" width="100"></el-table-column>
                    <el-table-column label="补签点" width="270"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.attendanceDate}} 9:00:00 ~ 18:15:00</span></template></el-table-column>
                    <el-table-column property="state" label="考勤状态" ><template slot-scope="scope"><span :style="{color: scope.row.state === '异常' ? 'red' : 'inherit' }">{{ scope.row.state }}</span></template></el-table-column>
                </el-table>
                <!-- 相当于改备注 -->
                <!-- 处理类型-->
                <el-form-item label="处理类型："   style="margin: 10px 0px 0px 0;">
                    <el-radio-group v-model="radio" size="small" name="处理类型">
                        <el-radio label="1" border>补签</el-radio>
                        <el-radio label="2" border >请假</el-radio>
                        <el-radio label="3" border >出差</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!--       事由         -->
                <el-form-item label="处理事由：" prop="notes">
                    <el-input type="textarea" autosize  placeholder="请输入内容" v-model="ALLForm.notes" autocomplete="off" :style="{ width: '610px' }" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
                <el-button  @click="ALLDialog = false;">取 消</el-button>
                <el-button type="primary" @click="ALlrepair()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 待办 抽屉 -->
        <el-drawer :title="'待办（'+this.count+')'" :visible.sync="drawer" direction="rtl">
            <!-- 卡片 -->
            <el-card v-for="(item, index) in applyForList" :key="index" shadow="hover" style="margin: 10px;background-color: #f5f5f5;font-size: 15px">
                <!-- 头像 -->
                <div style="display: flex; align-items: center;">
                    <div class="head-img" style="color: white; background-color: #E9B02A; text-align: center; line-height: 25px;" >
                        <span>{{item.z_name.substring(0,1)}}</span>
                    </div>
                    <div style="color: #333;">{{ item.z_name }}</span></div>
                    <div style="color: #999;">&nbsp;提交的</div>
                </div>
                <!-- XX申请、时间、事由 -->
                <div style="color: #292929;margin-top:2px;font-weight: bold">{{item.notes.substring(0,2)}}申请</div>
                <div style="color: #999;">{{item.notes.substring(0,2)}}时间：{{ item.bu_time }}</div>
                <div style="color: #999;">{{item.notes.substring(0,2)}}事由：{{ item.notes.substring(2) }}</div>
                <div style="display: flex; justify-content: space-between">
                    <div style="color: #999;">提交时间：{{ item.createtime }}</div>
                    <div><el-button size="mini" @click="refuse(item, index)">拒 绝</el-button>
                    <el-button size="mini" type="primary" @click="agree(item, index)">同意</el-button></div>
                </div>
            </el-card>
            <el-empty v-if="count === 0" description="暂无待办事项"></el-empty>
        </el-drawer>
        <!-- 消息 抽屉 -->
        <el-drawer :title="'未读消息（'+this.messageTotal+')'" :visible.sync="messageDreawer" direction="rtl">
            <!-- 卡片 -->
            <el-card v-for="(item, index) in messageList" :key="index" shadow="hover" style="margin: 10px;background-color: #f5f5f5;font-size: 14px">
                <!-- 头像 -->
                <div style="display: flex; align-items: center;">
                    <div class="head-img" style="color: white; background-color: #E9B02A; text-align: center; line-height: 25px;" >
                        <span>{{item.z_name.substring(0,1)}}</span>
                    </div>
                    <div style="color: #333;">{{ item.z_name }}</span></div>
                </div>
                <!-- 通知、时间 -->
                <div style="color: #292929;margin-top:2px;font-weight: bold">
                    你好，你提交的{{item.notes.substring(0,2)}}申请已审批完成，审批结果：<span style="color: red">{{item.result}}</span></div>
                <div style="color: #999;margin:2px 0">{{item.notes.substring(0,2)}}时间：{{ item.bu_time }}</div>
                <div style="color: #999;">{{item.notes.substring(0,2)}}事由：{{ item.notes.substring(2) }}</div>
                <div style="color: #999;margin:2px 0">直属上级：{{ item.leaderName }}</div>
                <div style="display: flex; justify-content: space-between">
                    <div style="color: #999;">审批时间：{{ item.overtime }}</div>
                    <div><el-button   v-if="isButtonDisabled(index)"  size="mini" type="primary" @click="read(item,index)">已读</el-button></div>
                </div>
            </el-card>
            <el-empty v-if="messageList.length===0" description="暂无消息通知"></el-empty>
        </el-drawer>

    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            user: JSON.parse(localStorage.getItem("user")),
            userRole1: '',//	administrator的权限,boolen
            userRole2: '',//  user的 boolen
            userNowdata: '', // 当前用户的所有数据
            activeIndex: '2-1',
            userNowName:'',//当前用户姓名

            loading: true, //加载动画
            originalData: [], // 当前页面数据
            z_name: "",
            startDate: "2020-10-10",
            endDate: "",
            total: 0, //总条数
            pageNum: 1, //第几页
            pageSize: 15, //每页几条数据
            value1: '',// 日期范围
            selectName: '',//搜索姓名内容
            form: {},
            repairDialog: false,//默认不展示 补签 对话框
            rules: {
                processExecutor: [{required: true, message: '1 ', trigger: 'blur'}],
                notes: [{required: true, message: '请输入内容', trigger: 'blur'}],
            },
            ifFormButton: '',// 补签的确认按钮
            repairTime:'',// 补签点
            title:'',//对话框题目
            multipleSelection: [],//表格选择项的数组
            ALLDialog: false,//默认不展示 批量处理 对话框
            ALLForm:{//批量处理
                notes:""
            },
            radio: '1', // 单选框组
            innerVisible:false , // User 补签的内层对话框
            leaderName:'',//查询的领导姓名（流程执行人）
            leaderDate:[],// 所有人的名字
            addLeader: '添加流程执行人',
            drawer: false,// 默认不显示 待办 抽屉
            count: '',// 待办 个数
            applyForList:'',// 待办 数据列表
            messageDreawer:false,// 默认不显示 消息 抽屉
            messageTotal:'',// 消息 个数
            messageList:'',//消息 数据列表
            logData : {// 日志信息 (公用)
                operator: '',
                logType: '',
                recordTime: '',
                operatorIP: "192.168.2.21",
                requestType: '',
                requestInterface: '',
                requestParameters: '',
                responseType: '',
                resdata:'',
                error:''
            },
        },
        created() {
            this.nowDate();
            this.getUserRole(); // 加载用户权限

            // 模拟加载动画
            setTimeout(() => {
                this.loading = false;
            }, 500); // 1秒后执行
        },
        computed: {
            // 已读的信息 不显示 已读按钮
            isButtonDisabled() {
                return (index) => this.messageList[index].userState === 'true';
            }
        },
        methods: {
            // 账号退出(通用）
            logoutButton() {
                axios.get("/user/logout")
            },
            // 用户权限（通用）
            getUserRole() {
                axios.get("/user/now?username=" + this.user)
                    .then(res => {
                        this.userRole1 = (res.data.UserNowdata[0].role === 'administrator')
                        this.userRole2 = (res.data.UserNowdata[0].role === 'user')
                        this.userNowdata = res.data.UserNowdata
                        // console.log(res.data.UserNowdata[0].role)
                        // console.log(this.userNowdata)
                         this.userNowName = this.userNowdata[0].z_name;
                         this.getApplyForList();//加载 待办
                         this.getUserName(); // 加载员工姓名 流程执行人
                         this.getMessageList();// 加载 消息
                         setTimeout(() => {this.getAttendanceList();}, 500);
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
            },
            // 请求出勤记录分页数据
            getAttendanceList() {
                if (this.userRole2) { // 因为User权限没有查询姓名功能，所有将 this.z_name 赋值为当前用户 ，实现只加载当前用户数据功能
                    this.z_name = this.userNowName
                }
                axios.get("/attendance/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&z_name=" + this.z_name + "&startDate=" + this.startDate + "&endDate=" + this.endDate)
                    .then(res => {
                        this.originalData = res.data.AttendanceData;
                        this.total = res.data.total;
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
                // console.log("数据1", this.originalData);
            },
            //重置页面
            reload(){
                window.location.reload()
            },
            // 筛选
            filterState(value, row) {
                return row.state === value;
            },
            filterDepartment(value, row) {
                return row.department === value;
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${this.pageSize} 条`);
                this.getAttendanceList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(`当前页: ${val}`);
                this.getAttendanceList();
            },
            // 姓名、日期范围，单个/组合搜索
            searchList(){
                this.pageNum = 1; //不先把页面等于1的话，有些会搜索不到
                this.z_name = this.selectName; // 搜索的名字
                if(this.value1 === '' || this.value1 === null){
                    // 因为日期范围在sql里面不能为空，所以要有个默认值
                    this.startDate = "2020-10-10";
                    this.nowDate()
                }else{
                    this.startDate =this.value1[0]; // 开始日期
                    this.endDate = this.value1[1]; // 结束日期
                }
                this.getAttendanceList();
            },
            // 获取当前日期
            nowDate(){
                let nowDate = new Date(); // 获取当前日期
                let year = nowDate.getFullYear(); // 年
                let month = String(nowDate.getMonth() + 1).padStart(2, '0'); // 月份 补零
                let day = String(nowDate.getDate()).padStart(2, '0'); //日  补零
                this.endDate = `${year}-${month}-${day}`; // 设置默认日期字符串
            },
            // admin 补签、请假、出差
            handleEdit(index, row) {
                console.log(index, row);
                this.repairTime = row.attendanceDate.substring(0, 10);
                this.form = { ...(row) };
                if(this.form.notes !== '--' || this.form.bu_state === '审批中'  ){
                    this.form.notes=this.form.notes.substring(7)
                    this.ifFormButton = false // 如果备注或补签状态都不为“--”，说明补签已提交过，不需要确认按钮
                }else{
                    this.form.notes=""
                    this.ifFormButton = true
                }
                this.repairDialog = true;
            },
            repair() {
                this.$refs.repairFrom.validate((valid) => {
                    if (valid) {
                        let newNotes = this.title+"【已通过】"+this.form.notes ;
                        axios.post('/attendance',  {  ...this.form, notes: newNotes})
                            .then(res => {
                                this.$message({message: this.title+'成功！', type: 'success'});
                                this.repairDialog = false;
                                this.getAttendanceList(); //刷新列表
                                // 访问请求的相关信息,写进日志
                                this.getLog(res);
                                axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                            }).catch(error => {
                            this.$message.error(this.title+'失败！');
                            console.error('error:', error);
                            // 访问请求的相关信息,写进日志
                            this.getLog(error);
                            axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                        });
                    }
                });
            },
            // 当表格选择项发生变化时会触发该事件
            handleSelectionChange(val) {
                 this.multipleSelection =val
                 console.log(this.multipleSelection)
            },
            // admin 批量处理
            ALlrepair() {
                //扁平化处理，只留下需要的id。map 函数，从一个对象数组中提取 id 属性，以创建一个新的只包含 id 的数组
                let ids = this.multipleSelection.map(v => v.id)  // [{},{},{}] => [1,2,3]
                // console.log(this.radio)
                // console.log(ids)
                this.$refs.ALLrepairFrom.validate((valid) => {
                    if (valid) {
                        const propertyMap = {
                            1: "补签",
                            2: "请假",
                            3: "出差"
                        };
                        let newNotes = propertyMap[this.radio] + "【已通过】" + this.ALLForm.notes;
                        axios.post('/attendance/update/batch', { notes: newNotes, ids: ids })
                            .then(res => {
                                this.$message({message: '处理成功！', type: 'success'});
                                this.ALLDialog = false;
                                this.getAttendanceList(); //刷新列表
                                // 访问请求的相关信息,写进日志
                                this.getLog(res);
                                axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                            }).catch(error => {
                            this.$message.error('处理失败！');
                            console.error('error:', error);
                            // 访问请求的相关信息,写进日志
                            this.getLog(error);
                            axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                        });

                    }
                });

            },
            // 请求所有员工名字
            getUserName() {
                axios.get("/user/name")
                    .then(res => {
                        let myArray = res.data.nameData
                        this.leaderDate = myArray.filter(item => item !== "超级管理员" &&  item !== this.userNowName);  // 移除超级管理员账号
                    });
            },
            // 搜索流程执行人
            searchLeaderName(){
                if(this.leaderName){
                    this.leaderDate =  this.leaderDate.filter(item => item.includes(this.leaderName));
                }else {
                    this.getUserName();
                }
            },
            // user 提交 补签、请假、出差
            lications() {
                if (this.addLeader !== '添加流程执行人') {
                    this.$refs.repairFrom.validate((valid) => {
                        if (valid) {
                            let newNotes = this.title  + this.form.notes;
                            axios.post('/attendance/applyfor', {...this.form,attend_id: this.form.id,leaderName: this.addLeader, notes: newNotes,state: "true",bu_time: this.repairTime + ' 9:00:00 ~ ' + this.repairTime+ ' 18:15:00'})
                                .then(res => {
                                    this.$message({message: '提交成功！', type: 'success'});
                                    this.repairDialog = false;
                                    this.getAttendanceList(); //刷新列表
                                    // 访问请求的相关信息,写进日志
                                    this.getLog(res);
                                    axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                                }).catch(error => {
                                this.$message.error('提交失败！');
                                console.error('error:', error);
                                // 访问请求的相关信息,写进日志
                                this.getLog(error);
                                axios.post('/log', {  ...this.logData, logType: '错误日志'} )
                            });

                        }
                    });
                } else {
                    this.$message({message: '请选择直属上级！', type: 'warning'});
                }
            },
            // 待办 抽屉 获取对应申请列表
            getApplyForList() {
                    axios.get("/attendance/applyfor/down?leaderName=" + this.userNowName )
                        .then(res => {
                            console.log("待办",res.data)
                            this.count = res.data.count
                            this.applyForList =res.data.applyFor
                            // 访问请求的相关信息,写进日志
                            this.getLog(res);
                            axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    })
            },
            // 待办 同意申请
            agree(item, index){
                console.log(item,index)
                let newNotes = item.notes.replace(item.notes.substring(0,2), item.notes.substring(0,2)+'【已通过】') ;
                axios.post('/attendance', { notes: newNotes, id: item.attend_id} )
                    .then(res => {
                        let nowDate = new Date().toLocaleString(); // 获取当前时间
                        axios.post('/attendance/applyfor/agree', { result:'通过', overtime: nowDate, id: item.id} ) // 改 申请 状态
                        .then(res =>{
                            this.$message({message: '操作成功！', type: 'success'});
                            this.getApplyForList(); //刷新待办
                            this.getAttendanceList();// 刷新列表
                            // 访问请求的相关信息,写进日志
                            this.getLog(res);
                            axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                        })
                    })
            },
            // 待办 拒绝申请
            refuse(item, index){
                console.log(item,index)
                axios.post('/attendance/applyfor/refuse?id='+ item.attend_id)
                    .then(res => {
                        let nowDate = new Date().toLocaleString(); // 获取当前时间
                        axios.post('/attendance/applyfor/agree', { result:'未通过', overtime: nowDate, id: item.id} ) // 改 申请 状态
                            .then(res =>{
                                this.$message({message: '操作成功！', type: 'success'});
                                this.getApplyForList(); //刷新待办
                                this.getAttendanceList();// 刷新列表
                                // 访问请求的相关信息,写进日志
                                this.getLog(res);
                                axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                            })
                    })
            },
            // 消息 获取申请结果  通知
            getMessageList(){
                axios.get("/attendance/applyfor/message?z_name=" + this.userNowName )
                    .then(res => {
                        console.log("消息",res.data)
                        this.messageTotal = res.data.messageCount
                        this.messageList =res.data.messageData
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    })
            },
            // 点击 “ 已读”
            read(item, index) {
                console.log(item, index)
                axios.post('/attendance/applyfor/message/read?id='+ item.id) // 改 已读 状态
                    .then(res => {
                        this.getMessageList(); //刷新消息
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    })
            },
            // 从接口的res 获取日志 (公用）
            getLog(res){
                this.logData.operator = this.user, // 操作者
                this.logData.recordTime = new Date().toLocaleString(), // 记录时间
                // this.logData.operatorIP = 操作者ip
                this.logData.requestType = res.config.method; // 请求类型
                this.logData.requestInterface = '/api'+ res.config.url;// 请求URL
                this.logData.requestParameters = res.config.data; // 请求参数
                if (res.headers && res.headers['content-type']) {
                    this.logData.responseType = res.headers['content-type'];// 实体主体的媒体类型
                }else{
                    this.logData.responseType=''
                }
                if(res.data){ // 响应参数
                    this.logData.resdata = JSON.stringify(res.data).substring(0, 5000);// 数组转成字符串，最大写入量5000
                    this.logData.error=''
                }else{ // 错误信息
                    this.logData.resdata =''
                   this.logData.error =  JSON.stringify(res).substring(0, 5000)
                }
            },

        }
    });
</script>
</body>
</html>